<template>
  <h1>Hello Vue3</h1>
  <h2>现在的年龄：{{ age }}</h2>
  <h2>十年后年龄：{{ newAge }}</h2>
  <button>加油~</button>
</template>

<script>
import { computed, ref } from 'vue'
/* 
  目标：掌握使用computed函数定义计算属性
  应用场景：当你需要依赖现有的响应式数据，根据一定逻辑得到一个新的数据。
*/
export default {
  setup() {
    const age = ref(18)
    const newAge = computed(() => {
      return age.value + 10
    })

    console.log('age', age)
    console.log('newAge', newAge)

    return { age, newAge }
  },
  // Vue2 的写法
  // computed: {
  //   newAge(){
  //     return this.age + 10
  //   }
  // },
}
</script>

<style></style>
